import { useRoutes } from "react-router-dom";
import styled from "styled-components";
import AppFooter from "../layout/AppFooter";
import { useSelector } from "react-redux";
import React, { useMemo } from "react";

const Styled = styled.article`
  .banner {
    height: 100rem;
    display: flex;
    align-items: center;
    justify-content: center;
    h1 {
      font-size: 10rem;
      color: #fff;
      font-weight: 700;
      animation: fade-in-down 1s linear 1;
      animation-duration: 800ms;
    }
  }
  main {
    min-height: 378px;
    padding: 0 65rem;
    margin-top: 5rem;
  }
  @media (max-width: 1220px) {
    main {
      padding: 0;
    }
  }
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
`;

const BannerPage = ({
  label = "default",
  showFooter = true,
  loading = false,
  title = "",
  children,
}) => {
  children = React.Children.toArray(children);
  const {
    blogInfo: { page_list },
  } = useSelector((state) => state.app);

  // 根据后端配置动态获取封面
  const coverStyle = useMemo(() => {
    const page = page_list?.find((e) => e.label === label);
    return page
      ? { background: ` url('${page.cover}') center center / cover no-repeat` }
      : { background: "grey center center / cover no-repeat" };
  }, [page_list]);

  return (
    <Styled>
      {/* 顶部图片 */}
      <div style={coverStyle} className="banner-fade-down banner">
        <h1>{title}</h1>
      </div>
      <main style={{ marginBottom: "5rem" }}>
        <div>{children}</div>
      </main>
      {showFooter ? <AppFooter /> : null}
    </Styled>
  );
};

export default BannerPage;
